<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="管理人员编辑、添加" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form">
        <el-form-item label="用户名称" prop="realname">
          <el-input clearable v-model="ruleForm.realname" style="width: 658px;" />
        </el-form-item>
        <el-form-item label="头像" prop="headPortrait">
          <DragUpload :url="ruleForm.headPortrait" @on-success="url => ruleForm.headPortrait = url" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input clearable v-model="ruleForm.mobile" type="number" style="width: 658px;" />
        </el-form-item>
        <el-form-item label="登录账号" prop="username">
          <el-input clearable v-model="ruleForm.username" style="width: 658px;" />
        </el-form-item>
        <el-form-item v-if="!ruleForm.id" label="登录密码" prop="password">
          <el-input clearable v-model="ruleForm.password" type="password" style="width: 658px;" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="ruleForm.status" :active-value="0" :inactive-value="2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { http_admin_user } from '@/api'
import { userEncrypt } from '@/utils/jsencrypt'
import { checkPhone } from '@/utils/validate'

export default {
  name: 'User1Add',
  data() {
    return {
      dialogValue: false,
      ruleForm: {
        id: undefined,
        realname: '',
        mobile: '',
        username: '',
        password: '',
        headPortrait: '',
        status: 0
      }
    }
  },
  computed: {
    rules() {
      return {
        username: [{ required: true, message: '不能为空' }],
        realname: [{ required: true, message: '不能为空' }],
        mobile: [{ required: true, validator: checkPhone }],
        password: [{ required: !this.ruleForm.id, message: '不能为空' }]
      }
    }
  },
  methods: {
    async open(item) {
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
      } else {
        this.ruleForm = {
          id: undefined,
          realname: '',
          mobile: '',
          username: '',
          password: '',
          headPortrait: '',
          status: 0
        }
      }
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const formData = {
            ...this.ruleForm
          }
          if (this.ruleForm.id) {
            formData.password = undefined
          } else {
            // formData.password = userEncrypt(this.ruleForm.password, '8vPT7i3jOuPoNac7')
            formData.password = this.ruleForm.password
          }
          http_admin_user[this.ruleForm.id ? 'update' : 'create']({
            ...formData
          }).then(res => {
            this.$message.success(res.msg)
            this.onPageBack()
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
</style>
